import React, { Component, Fragment } from "react";
// antd
import { Row, Col, Avatar } from 'antd';
// http
import http from '../../utils/request';
// css
import './info.scss'


class UserInfo extends Component {
    constructor(props){
        super(props)
        this.state = {
            realname: '',
            email: '',
            userid: '',
            avatar: '',
            created: '',
            updated: '',
            group_list: [],
            menu_list: [],
        }
    }

    componentDidMount() {
        this.loadData()
    }

    loadData = () => {
        http.get('/user/detail').then(response=>{
            const data = response.data.data
            this.setState({
                realname: data.user.realname,
                email: data.user.email,
                userid: data.user.userid,
                avatar: data.user.avatar,
                created: data.user.created,
                updated: data.user.updated,
                group_list: data.group_list,
                menu_list: data.menu_list,
            })
        }).catch()
    }

    render() {
        const {group_list, menu_list} = this.state
        return(
            <Fragment>
                <Row>
                    <Col span={5}>
                        <Avatar.Group>
                            <Avatar shape="square" size={150} src={this.state.avatar} />
                        </Avatar.Group>
                    </Col>
                    <Col span={6}>
                        <span className="user-info-title">用户信息</span>

                        <div className="div-user-class">
                            <Row>
                                <Col span={6}><span className="user-info-name">姓名: </span></Col>
                                <Col><span className="user-info-content">{this.state.realname}</span></Col>
                            </Row>
                        </div>

                        <div className="div-user-class">
                            <Row>
                                <Col span={6}><span className="user-info-name">邮箱: </span></Col>
                                <Col><span className="user-info-content">{this.state.email}</span></Col>
                            </Row>
                        </div>

                        <div className="div-user-class">
                            <Row>
                                <Col span={6}><span className="user-info-name">ID: </span></Col>
                                <Col><span className="user-info-content">{this.state.userid}</span></Col>
                            </Row>
                        </div>

                        <div className="div-user-class">
                            <Row>
                                <Col span={6}><span className="user-info-name">创建时间: </span></Col>
                                <Col><span className="user-info-content">{this.state.created}</span></Col>
                            </Row>
                        </div>

                        <div className="div-user-class">
                            <Row>
                                <Col span={6}><span className="user-info-name">更新时间: </span></Col>
                                <Col><span className="user-info-content">{this.state.updated}</span></Col>
                            </Row>
                        </div>

                    </Col>
                    <Col span={6}>
                    <span className="user-info-title">分组信息</span>
                        {
                            group_list && group_list.map(group_name => {
                                return (
                                    <div className="div-group-class">
                                        <span className="user-info-name">{group_name}</span>
                                    </div>
                                )
                            })
                        }
                    </Col>
                    <Col span={6}>
                        <span className="user-info-title">权限信息</span>
                        {
                            menu_list && menu_list.map(menu_name => {
                                return (
                                    <div className="div-group-class">
                                        <span className="user-info-name">{menu_name}</span>
                                    </div>
                                )
                            })
                        }
                    </Col>
                </Row>
            </Fragment>
        )
    }
    
}

export default UserInfo;